<template>
 <div class="wrapper">
     <swiper :options="swiperOption" ref="mySwiper" >
    <!-- slides -->
    <swiper-slide v-for="item  of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
    </swiper-slide>
  
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination">
    </div>
  </swiper>
 </div>
</template>
<script>

export default {
 name: "HomeSwiper",
 data () {
     return{
         swiperOption: {
             pagination: '.swiper-pagination',
             loop:true
         },
         swiperList:[{
             id: '0001',
             imgUrl: 'https://imgs.qunarzz.com/p/p29/201302/28/3d20251a1b60350a93835fbb.jpg_256x160_e8f468b0.jpg'
         } ,{
             id: '0002',
             imgUrl: 'https://imgs.qunarzz.com/p/p48/201302/28/e9603bf3a8f7fbfd93835fbb.jpg_256x160_91a0d66d.jpg' 
         }]
     }
 }
}; 
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active{
    background: #fff;
}
.wrapper{
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 61.25%;
}
.swiper-img{
    width: 100%;
}
</style>
